<template>
  <div class="home-content">
    <div class="side-menu">
      <!-- <div class="head">
        <img src="../../assets/images/head-logo.svg" alt="" />
        <h1>收藏库</h1>
      </div> -->
      <!-- <ul class="menu-body">
        <li v-for="(item, index) in sideMenuList" :key="index" @click="handleSelectAction(item.type)" :class="item.type == selectType ? 'active' : ''">
          <el-icon><component :is="item.icon"></component></el-icon>
          <span>{{ item.label }}</span>
        </li>
      </ul> -->
      <div class="tree-side">
        <h4>数据中心</h4>
        <ul class="menu-body">
          <li v-for="(item, index) in sideMenuList.slice(0, 2)" :key="index" @click="handleSelectAction(item.type)" :class="item.type == selectType ? 'active' : ''">
            <el-icon><component :is="item.icon"></component></el-icon>
            <span>{{ item.label }}</span>
          </li>
        </ul>
      </div>
      <div class="tree-side">
        <h4>阅读与快照</h4>
        <ul class="menu-body">
          <li v-for="(item, index) in sideMenuList.slice(2, 3)" :key="index" @click="handleSelectAction(item.type)" :class="item.type == selectType ? 'active' : ''">
            <el-icon><component :is="item.icon"></component></el-icon>
            <span>{{ item.label }}</span>
          </li>
        </ul>
      </div>
      <div class="tree-side">
        <h4>下载</h4>
        <ul class="menu-body">
          <li v-for="(item, index) in sideMenuList.slice(3, 4)" :key="index" @click="handleSelectAction(item.type)" :class="item.type == selectType ? 'active' : ''">
            <el-icon><component :is="item.icon"></component></el-icon>
            <span>{{ item.label }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- <book-marks-list ref="bookmarksRef" v-model="query"></book-marks-list> -->
    <div class="content">
      <component :is="component[selectType]"></component>
    </div>
  </div>
</template>

<script setup>
import { Comment, FolderDelete, Menu, Pointer, Star, Switch, Timer, Upload, UploadFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive, onMounted, markRaw, nextTick } from 'vue'
import { mAxios, encodeURL } from '~/utils/axios/axios.js'
import moment from 'moment'
import upload from './components/upload.vue'
import repeatBookmarks from './components/repeatBookmarks.vue'
import syncRule from './components/syncRule.vue'
import extension from './components/extension.vue'
const userId = Number(sessionStorage.getItem('user_id'))
// 获取当前日期
const currentDate = moment()
// 获取一周前的日期
const oneWeekAgo = moment().subtract(7, 'days')
const bookmarksRef = ref()
const query = ref({
  userId,
  begin: oneWeekAgo.format('YYYY-MM-DD HH:mm:ss'),
  end: currentDate.format('YYYY-MM-DD HH:mm:ss')
})
const component = ref({
  upload: markRaw(upload),
  repeatBookmarks: markRaw(repeatBookmarks),
  syncRule: markRaw(syncRule),
  extension: markRaw(extension)
})
const sideMenuList = [
  { label: '导入书签', icon: markRaw(UploadFilled), type: 'upload' },
  { label: '书签去重', icon: markRaw(FolderDelete), type: 'repeatBookmarks' },
  { label: '同步规则', icon: markRaw(Switch), type: 'syncRule' },
  { label: '插件应用', icon: markRaw(Menu), type: 'extension' }
]
const selectType = ref('upload')
const handleSelectAction = type => {
  selectType.value = type
  switch (type) {
    case 'new':
      query.value = {
        userId,
        begin: moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'),
        end: moment().format('YYYY-MM-DD HH:mm:ss')
      }
      break
    case 'asterisk':
      query.value = {
        userId,
        asterisk: 1
      }
      break
  }
}
// 树形组件相关
const tableTreeSide = ref()
const treeData = ref([{ id: 0, groupName: '全部', child: [] }])
const treeProps = {
  children: 'child',
  label: 'groupName',
  value: 'id'
}
const defaultExpandNodes = [0]
const getTreeSideData = () => {
  mAxios.get(`group/list/${userId}`).then(res => {
    treeData.value[0].child = res.data.data
  })
}
const treeInputRef = ref()
const handleAddNode = node => {
  node.expand()
  setTimeout(() => {
    node.data.child.unshift({
      label: '',
      child: [],
      type: 'input'
    })
    nextTick(() => {
      treeInputRef.value.focus()
    })
  }, 300)
}
const addNewNode = node => {
  let params = {
    userId,
    groupName: node.data.label
  }
  if (params.groupName != '') {
    mAxios.post(`group`, params).then(res => {
      res.data.succeed ? ElMessage.success('添加成功') : ElMessage.error('添加失败')
      getTreeSideData()
    })
  } else {
    tableTreeSide.value.remove(node)
  }
}
const deleteNode = node => {
  ElMessageBox.confirm('此操作会删除分组下所有的书签，确定要删除分组' + node.data.groupName + '？', '删除分组', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    center: true,
    closeOnClickModal: false,
    type: 'warning'
  }).then(() => {
    mAxios.delete('group', { data: { id: node.data.id } }).then(res => {
      res.data.succeed ? ElMessage.success('删除成功') : ElMessage.error('删除失败')
      getTreeSideData()
    })
  })
}
const handleClickNode = node => {
  selectType.value = ''
  query.value = {
    userId,
    groupId: node.data.id
  }
}
onMounted(() => {
  getTreeSideData()
})
</script>

<style scoped lang="scss">
.home-content {
  display: flex;
  .side-menu {
    width: 400px;
    padding: 7px;
    border-left: 1px solid #eee;
    background-color: #f8f8f8;
    .head {
      display: flex;
      align-items: center;
      padding: 0 20px;
      margin-top: 15px;
      h1 {
        font-size: 18px;
        font-weight: 600;
        margin-left: 10px;
      }
    }
    .menu-body {
      margin: 15px 0;
      li {
        display: flex;
        font-size: 14px;
        padding: 8px 20px;
        border-radius: 5px;
        color: #262626;
        cursor: pointer;
        &:hover {
          background-color: #e8e8e8;
          opacity: 0.8;
        }
        span {
          margin-left: 10px;
        }
      }
      .active {
        background-color: #e8e8e8;
        opacity: 0.8;
      }
    }
    .tree-side {
      width: 100%;
      max-height: 500px;
      overflow: auto;
      h4 {
        font-size: 14px;
        padding: 5px 10px;
        margin-bottom: 5px;
        color: #989898;
      }
      .custom-tree-node {
        width: 100%;
        display: flex;
        justify-content: space-between;
        cursor: default;
        padding-right: 20px;
        .node-label:hover {
          text-decoration: underline;
          cursor: pointer;
        }
        .node-icon {
          display: flex;
          align-items: center;
          cursor: pointer;
          :deep(.el-icon):hover {
            color: #8901b4;
          }
        }
      }
      .add-tree-node {
        :deep(.el-input) {
          height: 22px;
        }
      }
    }
  }
}
.content {
  width: 100%;
  padding: 20px;
}
</style>
